<template>
	<view class="index">
		<view class="content">
			<view class="phone-item">
				<view class="">
					验证码已发送至
				</view>
				<view class="">
					{{phone}}
				</view>
			</view>
			<view class="input-list">
				<!-- input输入框 -->
				<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" @blur="inputCodeBlur"
					@input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" type="number" oneTimeCode
					maxlength="4" />
				<!-- 验证码输入框 -->
				<view class="code-list" @click="focusClick">
					<view class="code-item" v-for="(item,index) in 4" :key="index"
						:style="(index == code.length && focus ? 'border-color:#2482EE;':'')">{{code[index]}}</view>
				</view>
			</view>
			<!-- 发送验证码按钮 -->
			<view class="get-code" @click="getCode" v-if="codeBtn.codeNumber == 0" style="color: #2482EE;">
				{{codeBtn.codeName}}
			</view>
			<view class="get-code" v-else style="color: #2482EE;">{{codeBtn.codeNumber}}s</view>
			<!-- <view class="code-btn">
				<button @click="loginCode">确认</button>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import {

		changeUserMobile,

	} from "@/api/user";
	import Cache from "@/utils/cache"
	import {
		sendSms,
		smsCodeLogin,
	} from '@/api/app';
	import {
		BACK_URL
	} from '@/config/cachekey'
	import {
		SMSType
	} from "@/utils/type"

	export default {
		data() {
			return {
				phone: '', // 手机号
				timer: null, // 定时器
				codeBtn: { // 按钮状态切换
					codeName: '获取验证码', // 状态名称
					codeNumber: 60, // 倒计时秒数
					isCode: true // 是否获取验证码
				},
				code: '', // 验证码字段
				focus: true, // input是否聚焦
				type: 0 //0-验证码登录 1-绑定手机
			}
		},
		watch: {
			// 监听倒计时
			'codeBtn.codeNumber': {
				handler(val) {
					// 这里监听用户输入完完整的验证码，去调接口验证。
					if (val == 0) {
						this.codeBtn.codeName = '重新获取'
						clearInterval(this.timer)
					}
				}
			}
		},
		methods: {
			...mapMutations(['LOGIN']),
			// 获取验证码
			getCode() {
				sendSms({
					mobile: this.phone,
					key: this.type == 0 ? SMSType.LOGIN : SMSType.BIND
				}).then(res => {
					if (res.code == 1) {
						this.$toast({
							title: res.msg
						});
						this.codeBtn.isCode = false
						this.codeBtn.codeNumber = 60
						this.timer = setInterval(() => {
							if (this.codeBtn.codeNumber == 0) {
								clearInterval(this.timer)
								return
							}
							this.codeBtn.codeNumber--
						}, 1000)
					}
				})

			},
			// 点击聚焦输入框
			focusClick() {
				this.focus = true
				if(this.code.length==4){
					this.code=''
				}
			},
			// 输入框失去焦点
			inputCodeBlur(e) {
				let value = e.detail.value
				this.focus = false
			},
			// 输入框聚焦时触发（没用到）
			inputFocus(e, height) {
				console.log(e)
			},
			// 输入框内容变化事件
			inputCode(e) {
				let value = e.detail.value
				this.code = value;
				console.log(this.code)
				if (this.code.length == 4) {
					this.loginCode();
				}
			},
			loginCode() {
				if (this.type == 0) {
					if (this.code.length != 4) {
						this.$toast({
							title: '请输入完整验证码'
						});
					} else {
						uni.showLoading({
							title: '登录中...',
							mask: true
						});
						smsCodeLogin({
							account: this.phone,
							code: this.code,
						}).then(res => {
							uni.hideLoading();
							if (res.code == 1) {
								this.loginHandle(res.data)
							}
						})
					}
				} else {
					uni.showLoading({
						title: '登录中...',
						mask: true
					});
					changeUserMobile({
						new_mobile: this.phone,
						code: this.code,
					}).then(res => {
						if (res.code == 1) {
						
							uni.hideLoading();
							this.$toast({
								title: res.msg
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 3,

								})
							}, 500)

						}else{
							uni.hideLoading();
						}
					})
				}


			},
			// 登录结果处理
			async loginHandle(data) {

				this.LOGIN(data)
				uni.hideLoading()
				const inviteCode = Cache.get("INVITE_CODE")
				if (inviteCode) {
					inputInviteCode({
						code: inviteCode
					})
				}
				// #ifdef H5
				// location.replace('/mobile' + (Cache.get(BACK_URL) || '/'))
				setTimeout(()=>{
					uni.navigateBack({
						delta: 3,
						success() {
							// 刷新上一页
							const {
								onLoad,
								options
							} = currentPage()
							onLoad && onLoad(options)
						}
					})
				},500)
				console.log(Cache.get(BACK_URL),999)
				// Cache.remove(BACK_URL)
				//#endif
				// #ifdef MP-WEIXIN  || APP-PLUS || MP-ALIPAY
				setTimeout(()=>{
					uni.navigateBack({
						delta: 3,
						success() {
							// 刷新上一页
							const {
								onLoad,
								options
							} = currentPage()
							onLoad && onLoad(options)
						}
					})
				},500)
				
				//#endif

			},
		},
		onLoad(options) {
			console.log(options)
			this.phone = options.mobile;
			console.log('type' in options, '333')
			if ('type' in options) {
				this.type = options.type;
				uni.setNavigationBarTitle({
					title: '绑定手机号'
				})
			}
			this.timer = setInterval(() => {
				if (this.codeBtn.codeNumber == 0) {
					clearInterval(this.timer)
					return
				}
				this.codeBtn.codeNumber--
			}, 1000)
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.index {
		padding: 30rpx;

		.content {
			padding: 20rpx;

			.phone-item {
				margin-top: 50rpx;
				text-align: center;

				>view:nth-child(1) {}

				>view:nth-child(2) {
					margin-top: 40rpx;
					margin-bottom: 70rpx;
					font-size: 42rpx;
					font-weight: 700;
				}
			}

			.input-list {
				display: flex;
				align-items: center;

				.input-item {
					width: 0rpx;
					
					z-index: 10;
				}

				.code-list {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.code-item {
						width: 100rpx;
						height: 100rpx;
						text-align: center;
						line-height: 100rpx;
						border: 2rpx solid #cccccc;
						border-radius: 10rpx;
						background-color: #f7f7f7;
						font-size: 36rpx;
						z-index: 1;
					}
				}
			}
		}
	}

	.get-code {
		text-align: center;
		margin-top: 40rpx;
	}

	.code-btn {
		padding: 10rpx;
		margin-top: 100rpx;
		background-color: #2482EE;
		border-radius: 12rpx;

		button {
			color: #ffffff;
		}
	}
</style>